<template>
  <a-modal
    :title="title"
    :visible="visible"
    width="580px"
    cancelText="取消"
    okText="确定"
    :maskClosable="false"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <a-form-model ref="form" :model="form" v-bind="layout" :rules="rules">
      <template v-if="type !== 'move'">
        <a-form-model-item label="看板名称" prop="name">
          <a-input v-model="form.name"></a-input>
        </a-form-model-item>
        <a-form-model-item label="看板描述" prop="description">
          <a-textarea style="vertical-align: top" v-model="form.description" placeholder="请输入看板描述" :rows="4" />
        </a-form-model-item>
        <a-form-model-item label="标签" prop="label">
          <a-select mode="tags" v-model="form.label">
            <a-select-option v-for="(item, index) in labelOptions" :key="index" :value="item.name">
              {{item.name}}
            </a-select-option>
          </a-select>
        </a-form-model-item>
      </template>
      <a-form-model-item label="保存位置" prop="dasDashboardCategoryId" >
        <a-tree-select
          :replaceFields="{title: 'name', value: 'id'}"
          style="width: 100%"
          v-model="form.dasDashboardCategoryId"
          :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
          :tree-data="treeData"
          placeholder="请选择保存位置"
        />
        <!-- :load-data="onLoadData" -->
      </a-form-model-item>
      <a-form-model-item label="选择模板" prop="template" v-if="type === 'add'">
        <div class="template-list">
          <div
          v-for="item in templateOptions"
          :key="item.id" class="item"
          :class="form.template === item.id ? 'active' : ''"
          :style="item.style"
          @click="handleTemplateChange(item.id)">
            <a-icon class="check" type="check-circle" />
            <div class="label">{{item.name}}</div>
          </div>
        </div>
      </a-form-model-item>
    </a-form-model>

  </a-modal>
</template>

<script>
import { labelTop20, getDashboardCategoryTree, getTemplateList, addDashboard, upDashboard } from "@/api/multidimensionalAnalysis"

const layout = {
  labelCol: {
    span: 4
  },
  wrapperCol: {
    span: 20
  }
}
export default {
  data() {
    return {
      visible: false,
      form: {
        label: []
      },
      treeData: [],
      rules: {
        // dasDashboardCategoryId: [
        //   { required: true, message: '保存位置不得为空', trigger: 'change' },
        // ],
        name: [{ required: true, message: "名称不能为空", trigger: "blur" }],

      },
      layout,
      labelOptions: [],
      templateOptions: [],
      title: "新增看板",
      type: "add"
    }
  },
  created(){
    // 获取标签
    labelTop20()
    .then((data)=> {
      this.labelOptions = data.data || []
    })
    // 获取保存位置
    getDashboardCategoryTree()
    .then(data => {
      this.treeData = data.data || []
    })
    // 获取模板
    getTemplateList()
    .then(data => {
      this.templateOptions = data.data || []
      if(this.templateOptions.length > 0){
        this.form.template = this.templateOptions[0].id
      }
    })
  },
  methods: {
    handleSaveLocationChange(value, label, extra){

      const each = (list, path)=> {
        path = path || []
        for(let i =0;i<list.length;i++){
          const item = list[i]
          if(item.id === value){
            path.push(item.id)
            isFind = true
            break
          }
          if(item.children.length !== 0){
            path.push(item.id)
            each(item.children, path)
          }


        }
        return path
      }
      let path = []
      let isFind = false
      for(let i =0;i<this.treeData.length;i++){
        path = []
        const item = this.treeData[i]
        if(item.id === value){
          path.push(item.id)
          break
        }
        if(item.children.length !== 0){
          path.push(item.id)
          each(item.children, path)
        }

        if(isFind){
          break
        }

      }
      this.form.pathLevel = path.join(",")
      console.log(value, path)
    },
    handleOk() {
      if(this.type === "add"){
        this.form.itemList = []
        this.form.pageOperation = JSON.stringify({
          componentList: [],
          // eslint-disable-next-line no-irregular-whitespace
          pageSetting: JSON.parse(this.templateOptions.find(item => item.id === this.form.template)?.style?.replaceAll("\"{", "{").replaceAll("}\"", "}") || "{globalTitleStyle:{}}")
        })
      }
      this.form.dasLabelList = this.labelOptions.filter(item => this.form.label.includes(item.name))
      const callBack = this.type === "add" ? addDashboard : upDashboard
      this.$refs.form.validate(valid => {
        if(valid){
          callBack({
            ...this.form,
            dasDashboardCategoryId: this.form.dasDashboardCategoryId || 0
          })
          .then(data => {
            if(data.errorCode === 0){
              if(this.type === "add"){
                this.$router.push({ path: "/quote/multidimensionalAnalysis/editAgileKanban", query: {id: data.data.id} })
              }
              else {
                this.handleCancel()
                this.$message.success("重命名成功")

              }

            }
            else {
              this.$message.error(data.msg)
            }
          })
        }
      })


      // this.$store.commit("lowCode/setKanbanData", this.form)
      // this.$emit("ok")
    },
    handleCancel(){

      this.visible = false
      this.form = {
        label: [],
        template: this.templateOptions.length > 0 ? this.templateOptions[0].id : undefined
      }
      this.$emit("edit")

    },
    handleTemplateChange(id){
      this.form.template = id
    },
    show(val, type = "add") {
      if(type === "add"){
        this.title = "新增看板"
      }
      else if(type === "edit"){
        this.title = "编辑看板"
        this.form = {
          ...val,
          label: [...val.labels],
          dasDashboardCategoryId: val.parentPath
        }
      }
      else if(type === "move") {
        this.title = "移动到"
        this.form = {
          ...val,
          label: [...val.labels],
          dasDashboardCategoryId: val.parentPath
        }
      }
      else {
        this.title = "新增看板"
        this.type = "add"
      }
      this.type = type
      this.visible = true
    },
    onLoadData(){
      return new Promise(resolve => {
        resolve()
      })
    },
    addClassification() {

    }
  }
}
</script>

<style lang="less" scoped>
/deep/ .ant-col{
  margin: 0!important;
  padding: 0!important;
}
.template-list {
  display: flex;
  flex-wrap: wrap;
  .item {
    border: 1px #eee solid;
    width: 120px;
    height: 98px;
    border-radius: 4px;
    position: relative;
    .check {
      position: absolute;
      left: 10px;
      top: 10px;
      display: none;
      font-size: 20px;
      color: @theme-color;
    }
    .label {
      position: absolute;
      height: 28px;
      bottom: 0;
      left: 0;
      background: rgba(0,0,0, 0.6);
      width: 100%;
      color: #fff;
      display: flex;
      align-items: center;
      padding: 0 4px;
      overflow: hidden;
      text-overflow:ellipsis;
      white-space: nowrap;

    }
    &.active {
      border-color: @theme-color;
      .check {
        display: block;
      }
    }
  }
}
</style>
